---
title: '`* { box-sizing: border-box; }` 是什么作用？'
subtitle: 它有什么优点？
---

`* { box-sizing: border-box; }` 使页面上的每个元素都使用 `box-sizing: border-box` 方法来计算元素的 `height` 和 `width`。

## 有什么区别？

默认情况下，元素应用了 `box-sizing: content-box`，如果一个元素指定了 `height` 和 `width`，则只计算内容大小。`box-sizing: border-box` 改变了元素的 `width` 和 `height` 的计算方式，`border` 和 `padding` 也被包含在计算中。现在，一个元素的高度由内容的 `height` + 垂直 `padding` + 垂直 `border` 宽度计算。一个元素的宽度现在由内容的 `width` + 水平 `padding` + 水平 `border` 宽度计算。

下表指示了当属性具有各自的 `box-sizing` 时，该属性是否包含在元素的 height 和 width 的计算中：

| 属性  | `box-sizing: content-box` (默认) | `box-sizing: border-box` |
| --------- | ----------------------------------- | ------------------------ |
| content   | 是                                 | 是                      |
| `padding` | 否                                  | 是                      |
| `border`  | 否                                  | 是                      |
| `margin`  | 否                                  | 否                       |

## 优点

将 `padding` 和 `border` 考虑为盒子模型的一部分，这与设计师在网格中实际想象内容的方式更吻合。这是一种更直观的思考盒子的方式，因此许多 CSS 框架全局设置 `* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。

## 参考

* [Box Sizing | CSS-Tricks](https://css-tricks.com/box-sizing/)
